<template>
	<view>
		<uv-navbar :placeholder="true" @leftClick="leftClick">
			<view class="" slot="center">
				<view class="font-32 font-weight textC">填写个人资料</view>
				<!-- <view class="grey font-24 textC">完成度34%</view> -->
			</view>
		</uv-navbar>

		<view class="p-30">
			<view class="font-weight grey m-b-30">我的头像</view>
			<view class="flex myImage">
				<image class="myImageItemA" v-if="fullurl===''" src="../../static/images/addImages.png" @click="addImage1"
					mode=""></image>
					<image class="myImageItemA" v-else :src="fullurl" @click="addImage1"
						mode=""></image>
			</view>
		</view>
		<!-- 我的照片 -->
		<view class="p-30">
			<view class="font-weight grey m-b-30">我的照片</view>
			<view class="flex myImage">
				<view class="myImageItem" style="margin-bottom: 25rpx;" v-for="(item,i) in 6" :key="i">
					<image class="myImageItemA" :src="$util.img(myImages[i])" v-if="myImages[i]" mode="aspectFill">
					</image>
					<image class="myImageItemA" src="../../static/images/addImages.png" @click="addImage" v-else
						mode=""></image>
					<view class="myImageItemText" v-if="myImages[i]&&i==0">封面</view>
					<image class="iconImage" v-if="myImages[i]" src="../../static/icon/close.png" @click="closeImg(i)"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="p-30" style="padding-top: 0;">

			<!-- 基本资料 -->
			<view class="font-weight grey m-b-30">基本资料</view>
			<view class="flex_b m-b-30">
				<view class="">昵称</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/userName/userName',{name:form.nickname})">
					{{form.nickname||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>

			<view class="flex_b m-b-30">
				<view class="">性别</view>
				<view class="grey flex" @click="gender">{{form.gender==1?'男':form.gender=='0'?'女':'请选择'}}<text
						class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
			</view>

			<view class="flex_b m-b-30">
				<view class="">婚姻情况</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/marriage/marriage')">
					{{form.marriage||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>

			<!-- <view class="p-t-30" style="border-bottom: 1rpx solid #f7f7f6;" @click="$util.redirectTo('/frompages/marriage/marriage')">
				<view class="font-weight grey m-b-30">婚姻情况</view>
				<view class="flex_b m-b-30">
					<view class="">{{form.marriage||'请选择'}}</view>
					<view class="grey flex" ><text
							class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
				</view>
			</view> -->

			<view class="flex_b m-b-30">
				<view class="">出生日期</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/birthday/birthday')">
					{{form.birthday||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>

			<view class="flex_b m-b-30">
				<view class="">户籍</view>
				<view class="flex f-t" @click="$util.redirectTo('/frompages/address/address')">{{form.huji||'请选择'}}<text
						class="iconfont icon-xiangyoujiantou m-l-10 grey" style="font-size: 24rpx;"></text> </view>
			</view>

			<view class="flex_b m-b-30">
				<view class="">居住地</view>
				<view class="flex f-t" @click="$util.redirectTo('/frompages/addressSelect/addressSelect')">
					{{addressTitle||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10 grey"
						style="font-size: 24rpx;"></text>
				</view>
			</view>

			<view class="flex_b m-b-30">
				<view class="">职业</view>
				<view class="flex f-t" @click="$util.redirectTo('/frompages/occupation/occupation')">
					{{careerTitle||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10 grey"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">学历</view>
				<view class="flex f-t" @click="$util.redirectTo('/frompages/educationUni/educationUni')">
					{{form.education||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10 grey"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">星座</view>
				<view class="flex f-t" @click="$util.redirectTo('/frompages/constellation/constellation')">
					{{constellation||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10 grey"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<!-- <view class="font-weight grey m-b-30">更多信息</view> -->
			<view class="flex_b m-b-30">
				<view class="">身高</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/height/height')">
					{{form.height?form.height:'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">体重</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/weight/weight')">
					{{form.weight?form.weight+'kg':'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>

			<view class="flex_b m-b-30">
				<view class="">年收入</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/income/income')">
					{{form.income||'暂不透露'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">住房</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/house/house',{type:'house'})">
					{{form.house||'暂不透露'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">车辆</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/house/house',{type:'car'})">
					{{form.car||'暂不透露'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>



			<view class="p-t-30" style="border-top: 1rpx solid #f7f7f6;border-bottom: 1rpx solid #f7f7f6;">
				<view class="font-weight grey m-b-30">自我介绍</view>
				<view class="flex_b">
					<textarea style="height: 100rpx;" name="text" v-model="form.bio" maxlength="100" id="" cols="30"
						rows="10" placeholder="在这里留下你的介绍吧" placeholder-class="font-28 grey"></textarea>
					<view class=""><text class="f-t">{{form.bio.length}}</text>/100</view>
				</view>
			</view>

			<!-- 	<view class="p-t-30" style="border-top: 1rpx solid #f7f7f6;border-bottom: 1rpx solid #f7f7f6;">
				<view class="font-weight grey m-b-30">择偶需求</view>
				<view class="flex_b">
					<textarea style="height: 100rpx;" name="text" v-model="form.selectask" maxlength="100" id="" cols="30"
						rows="10" placeholder="在这里留下你的介绍吧" placeholder-class="font-28 grey"></textarea>
					<view class=""><text class="f-t">{{form.selectask.length}}</text>/100</view>
				</view>
			</view> -->
			<view class="font-weight grey m-b-30">择偶需求</view>
			<view class="flex_b m-b-30">
				<view class="">年龄要求</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/ageInterval/ageInterval')">
					{{form.ageask||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">身高要求</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/heightInterval/heightInterval')">
					{{form.heighask||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">学历要求</view>
				<view class="grey flex"
					@click="$util.redirectTo('/frompages/educationUni/educationUni',{type:'yaoqiu'})">
					{{form.educationask||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="flex_b m-b-30">
				<view class="">收入要求</view>
				<view class="grey flex" @click="$util.redirectTo('/frompages/income/income',{type:'yaoqiu'})">
					{{form.incomeask||'请选择'}}<text class="iconfont icon-xiangyoujiantou m-l-10"
						style="font-size: 24rpx;"></text>
				</view>
			</view>
			<!-- <view class="p-t-30" style="border-bottom: 1rpx solid #f7f7f6;" @click="$util.redirectTo('/frompages/ageInterval/ageInterval')">
				<view class="font-weight grey m-b-30">年龄要求</view>
				<view class="flex_b m-b-30">
					<view class="">{{form.ageask||'请选择'}}</view>
					<view class="grey flex" ><text
							class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
				</view>
			</view> -->

			<!-- <view class="p-t-30" style="border-bottom: 1rpx solid #f7f7f6;" @click="$util.redirectTo('/frompages/heightInterval/heightInterval')">
				<view class="font-weight grey m-b-30">身高要求</view>
				<view class="flex_b m-b-30">
					<view class="">{{form.heighask||'请选择'}}</view>
					<view class="grey flex" ><text
							class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
				</view>
			</view>
			<view class="p-t-30" style="border-bottom: 1rpx solid #f7f7f6;" @click="$util.redirectTo('/frompages/educationUni/educationUni',{type:'yaoqiu'})">
				<view class="font-weight grey m-b-30">学历要求</view>
				<view class="flex_b m-b-30">
					<view class="">{{form.educationask||'请选择'}}</view>
					<view class="grey flex" ><text
							class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
				</view>
			</view>
			
			<view class="p-t-30" style="border-bottom: 1rpx solid #f7f7f6;" @click="$util.redirectTo('/frompages/income/income',{type:'yaoqiu'})">
				<view class="font-weight grey m-b-30">收入要求</view>
				<view class="flex_b m-b-30">
					<view class="">{{form.incomeask	||'请选择'}}</view>
					<view class="grey flex" ><text
							class="iconfont icon-xiangyoujiantou m-l-10" style="font-size: 24rpx;"></text> </view>
				</view>
			</view> -->




			<view class="bottom-mar" style="height: 200rpx;"></view>

		</view>
		<view class="bomPosition">
			<button type="primary" @click="submit">保存</button>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import base from "@/common/js/config.js"
	export default {
		data() {
			return {
				fullurl:'',
				textValue: '',
				userInfo: {},
				myImages: [],
				addressTitle: '',
				careerTitle: '',
				constellation: '',
				form: {
					// avatar:'',
					nickname: '',
					bio: '',
					birthday: '',
					province_id: '',
					city_id: '',
					area_id: '',
					marriage: '',
					height: '',
					weight: '',
					house: '',
					car: '',
					gender: '',
					cover_image: '',
					career_id: '',
					selectask: '',
					education: '',
					income: '',
					ageask: '',
					heighask: '',
					educationask: '',
					incomeask: '',
					huji: ''
				}
			};
		},
		mixins: ['base'],
		onShow() {
			uni.$on('uAvatarCropper', path => {
				// 上传图片方法
				this.update(path);
			});
			
			uni.$on('nicknameFn', data => {
				console.log('昵称：', data);
				this.form.nickname = data
			})
			uni.$on('birthdayFn', data => {
				console.log('生日：', data);
				this.form.birthday = data
			})
			uni.$on('province', data => {
				console.log('地址：', data);
				this.addressTitle = data.title
				this.form.city_id = data.city_id
				this.form.province_id = data.province_id
				this.form.area_id = data.area_id
			})
			uni.$on('career', data => {
				console.log('职业：', data);
				this.careerTitle = data.title
				this.form.career_id = data.career_id
			})
			uni.$on('marriageFn', data => {
				console.log('婚姻情况：', data);
				this.form.marriage = data
			})
			uni.$on('hujiFn', data => {
				console.log('户籍：', data);
				this.form.huji = data
			})
			uni.$on('heightFn', data => {
				console.log('身高：', data);
				this.form.height = data
			})
			uni.$on('weightFn', data => {
				console.log('体重：', data);
				this.form.weight = data
			})
			uni.$on('incomeFn', data => {
				console.log('收入：', data);
				this.form.income = data
				console.log(this.form.income);
				this.$forceUpdate()
			})

			uni.$on('incomeYaoqiu', data => {
				console.log('收入区间：', data);
				this.form.incomeask = data
				this.$forceUpdate()
			})

			uni.$on('houseFn', data => {
				console.log('房：', data);
				this.form.house = data
			})
			uni.$on('carFn', data => {
				console.log('车：', data);
				this.form.car = data
			})
			uni.$on('educationTitleFn', data => {
				console.log('学历：', data);
				this.form.education = data
			})

			uni.$on('educationYaoqiu', data => {
				console.log('学历区间：', data);
				this.form.educationask = data
			})

			uni.$on('constellationFn', data => {
				console.log('星座：', data);
				this.constellation = data
				console.log(this.constellation);
			})
			uni.$on('ageaskFn', data => {
				console.log('年龄区间：', data);
				this.form.ageask = data
				console.log(this.form.ageask, '-=-=');
				this.$forceUpdate()
			})

			uni.$on('heightFnI', data => {
				console.log('身高区间：', data);
				this.form.heighask = data
				this.$forceUpdate()
			})
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 添加图片
			addImage1() {
				uni.navigateTo({
					url: "/otherpages/userInfo/cropper?destWidth=200&rectWidth=200&fileType=jpg"
				})
				
			uni.$on('uAvatarCropper', path => {
				// 上传图片方法
				this.update(path);
			});
			},
			
			// 上传图片
			update(filePath) {
				const that = this
				const token = uni.getStorageSync('token')
				uni.uploadFile({
					url: `${base.baseUrl}api/Common/upload`,
					filePath: filePath, //传递进来的图片
					name: 'file',
					header: {
						'Authorization': token
					},
					success(res) {
						let data = JSON.parse(res.data).data
						console.log('data', data)
						console.log('data', data.fullurl)
						that.fullurl=data.fullurl;
						console.log('data', data.fullurl)
						// that.form.avatar=data.url
						
					},
					fail(res) {
						console.log(res, '失败的上传')
					}

				})
			},

			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.myImages = []
						this.userInfo = res.data
						this.form = {
							nickname: res.data.nickname,
							bio: res.data.bio,
							birthday: res.data.birthday,
							province_id: res.data.province_id,
							city_id: res.data.city_id,
							area_id: res.data.area_id,
							marriage: res.data.marriage,
							height: res.data.height,
							weight: res.data.weight,
							house: res.data.house,
							car: res.data.car,
							gender: res.data.gender,
							career_id: res.data.career_id,
							selectask: res.data.selectask,
							education: res.data.education,
							income: res.data.income,
							ageask: res.data.ageask,
							heighask: res.data.heighask,
							educationask: res.data.educationask,
							incomeask: res.data.incomeask,
							huji: res.data.huji,
						}
						this.constellation = res.data.constellation
						if (res.data.province_name && res.data.city_name) {
							this.addressTitle = res.data.province_name + ',' + res.data.city_name + ',' + res
								.data
								.area_name
						} else {
							this.addressTitle = ''
						}
						if (res.data.top_career_name && res.data.career_name) {
							this.careerTitle = res.data.top_career_name + ',' + res.data.career_name
						} else {
							this.careerTitle = ''
						}
						if (res.data.album_images) {
							res.data.album_images.forEach((item, i) => {
								this.myImages.push(item.image)
							})
						}

					}
				})
			},
			submit() {
				if (!this.myImages.length) {
					this.$refs.toast.show({
						type: 'default',
						message: '请上传图片',
						duration: 1000
					})
					return
				}
				this.$api.sendRequest({
					url: '/api/User/profile',
					data: {
						...this.form,
						constellation: this.constellation,
						useralbum: this.myImages.toString(),
						avatar: this.fullurl,
						cover_image: this.myImages[0],
					},
					success: res => {
						if (res.code == 1) {
							this.$refs.toast.show({
								type: 'default',
								message: res.msg,
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							this.$refs.toast.show({
								type: 'default',
								message: res.msg,
								duration: 1000
							})
						}
					}
				})
			},
			closeImg(i) {
				this.myImages.splice(i, 1)
			},
			// 添加图片
			addImage() {
				uni.chooseImage({
					count: 6 - this.myImages.length,
					success: res => {
						res.tempFilePaths.forEach((item, i) => {
							wx.showLoading({
								title: '上传中(' + (i + 1) + '/' +
									res.tempFilePaths.length + ')'
							})
							uni.uploadFile({
								url: `${base.baseUrl}api/Common/upload`,
								filePath: item,
								name: 'file',
								success: resA => {
									let a = JSON.parse(resA.data)
									this.myImages.push(a.data.url)
								},
								fail: errA => {
									console.log(errA);
								}
							});
							if (i + 1 == res.tempFilePaths.length) {
								wx.hideLoading()
							}
						})

					},
					fail(err) {
						console.log(err);
					}
				})

			},
			leftClick() {
				uni.navigateBack()
			},

			gender() {
				uni.showActionSheet({
					itemList: ['女', '男'],
					success: res => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.form.gender = res.tapIndex
					},
					fail: res => {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.myImageItem {
		width: 216rpx;
		height: 240rpx;
		border-radius: 16rpx;
		position: relative;

		.myImageItemA {
			width: 216rpx;
			height: 240rpx;
			border-radius: 16rpx;
		}

		.iconImage {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			bottom: 20rpx;
			right: 20rpx;
		}

		.myImageItemText {
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			width: 66rpx;
			height: 36rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.3);
			font-size: 24rpx;
			line-height: 36rpx;
			text-align: center;
			border-radius: 8rpx;
		}
	}

	.myImage {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.myImageItemA {
		width:216rpx;
		height:216rpx;
	}
</style>
